<template>
  <div>
    <!-- <div>jerry:{{ count }}}</div> -->
    <!-- <div>{{ $store.getters.showJerryCount }}}</div> -->
    <div>jerry:{{ jerryCount }}} tom:{{ tomCount }}}</div>
    <button @click="addN">+N</button>
  </div>
</template>

<script>
import bus from '@/utils/eventBus'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
    //   count: 0
    }
  },
  computed: {
    // count() {
    //   return this.$store.state.jerryCount
    // }
    ...mapState(['jerryCount', 'tomCount']), // 批量生成计算属性
    /*
      等效于
      jerryCount(){
        return this.$store.state.jerryCount
      }
      tomCount(){
        return this.$store.state.tomCount
      }
    */
    ...mapGetters(['showJerryCount'])
  },
  mounted() {
    // 接收消息
    bus.$on('add-jerry', (data) => {
      this.count += data
    })
  },
  methods: {
    ...mapMutations(['addTom']), // 获取mutation同步方法
    ...mapActions(['addTomSync']), // 获取actions异步方法
    addN() {
      // 发送消息
    //   bus.$emit('add-tom', 3)
    // this.$store.state.jerryCount += 1
    //   this.$store.commit('addTom', 3)
    //   this.$store.dispatch('addTomSync', 3)
    //   this.addTom(3)  // 通过this调用方法
      this.addTomSync(3) // 通过this调用方法
    }
  }
}
</script>

<style>

</style>
